<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单的手动提交</title>
    <script type="text/javascript">
        //用户名不能空，用户名的长度需要在6~8
        //密码的内容不能为空，密码的长度需要在6~8位
        function method01(){
            var textErrorElement=document.getElementById('usernameerror');
            var passwordErrorElement=document.getElementById('usererrorpassword');
            textErrorElement.innerHTML='<font>*用户名必须是6-8位</font>';
            passwordErrorElement.innerHTML='<font>* 密码必须是6-8位</font>';
            //获取文本框里输入的内容
            var textElement=document.getElementById('username');
            var textContext=textElement.value;
            //判断是否符合条件
            if(!(textContext!=null&&textContext.length>=6&&textContext.length<=8)){
                textErrorElement.innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">用户名出错！</font>';
                return;
            }
            //获取密码框输入的内容
            var passwordElement=document.getElementById('userpassword');
            var passwordContent=passwordElement.value;
            //判断是否符合条件
            if(!(passwordContent!=null&&passwordContent.length>=6&&passwordContent.length<=8)){
                passwordErrorElement.innerHTML='&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">密码出错！</font>';
                return;
            }
            //实现表单的提交
            var formElement=document.getElementById('myform');
            formElement.action="js02_01_01.html";
            formElement.method="post";
            formElement.submit();
        }
    </script>
</head>
<body>
<form id="myform">
    用户名：<input type="text" id="username"><span id="usernameerror"><font>*用户名必须是6-8位</font></span><br>
    密码：<input type="password" id="userpassword"><span id="usererrorpassword"><font>* 密码必须是6-8位</font></span><br>
    <input type="button" value="提交" onclick="method01()">
    <input type="reset" value="重置">
</form>
</body>
</html>